<template>
  <div class="container">
    <div class="table">
      <div class="topBar" v-if="hasSlotContent('topBar')">
        <slot name="topBar"></slot>
      </div>

      <div class="operationBar">
        <div class="label">{{ operationBarLabel }}</div>
        <slot name="operationBar"></slot>

        <div class="rightBtns" v-if="showExpand">
          <el-button
            v-if="!expand"
            v-once-click
            color="#626aef"
            plain
            :icon="FullScreen"
            circle
            title="展开表格"
            @click="tableExpandHandle(true)"
          >
          </el-button>
          <el-button
            v-if="expand"
            v-once-click
            color="#626aef"
            :icon="FullScreen"
            circle
            title="收起表格"
            @click="tableExpandHandle(false)"
          >
          </el-button>
          <div style="width: 10px; height: 10px"></div>
        </div>
      </div>

      <slot name="table" :maxHeight="expand ? '' : tableMaxHeight"></slot>

      <div class="paginationBar" v-if="hasSlotContent('paginationBar')">
        <slot name="paginationBar"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, useSlots } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'

const slots = useSlots()

const props = defineProps({
  operationBarLabel: { type: String, defalut: 'label' },
  showExpand: { type: Boolean || Number, defalut: false },
  tableMaxHeight: { type: Number, defalut: 300 },
})

onMounted(() => {
  labelHandle()
  tableMinHeightHandle()
  showExpandHandle()
})

watch(
  () => props.operationBarLabel,
  () => labelHandle()
)

// 操作栏标签
const operationBarLabel = ref<string>('OperationLabel')
const labelHandle = () => {
  if (!props.operationBarLabel)
    return (operationBarLabel.value = 'OperationLabel')

  if (props.operationBarLabel.trim().length === 0)
    operationBarLabel.value = 'OperationLabel'
  else operationBarLabel.value = props.operationBarLabel
}

// 通用方法检查插槽是否有内容 (适用于 Vue 3 Composition API)
const hasSlotContent = (slotName) => {
  // slots[slotName] 是一个返回 VNode 数组的函数，或者 undefined
  const slot = slots[slotName]
  if (!slot) return false // 插槽未定义
  else return true
}

watch(
  () => props.tableMaxHeight,
  () => tableMinHeightHandle()
)

// 表格最小高度
const tableMaxHeight = ref<number>(300)
const tableMinHeightHandle = () => {
  if (!props.tableMaxHeight) return (tableMaxHeight.value = 300)
  if (typeof props.tableMaxHeight != 'number')
    return (tableMaxHeight.value = 300)

  tableMaxHeight.value = props.tableMaxHeight
}

watch(
  () => props.showExpand,
  () => showExpandHandle()
)

// 是否展开表格
const expand = ref(false)
const tableExpandHandle = (val: boolean) => {
  expand.value = val
}

// 是否显示展开表格按钮
const showExpand = ref(false)
// 操作栏右侧内边距
const operationBarRightPadding = ref<string>('50px')
const showExpandHandle = () => {
  if (typeof props.showExpand === 'number') {
    showExpand.value = true
    operationBarRightPadding.value = props.showExpand + 'px'
    return
  }

  if (typeof props.showExpand === 'boolean') {
    showExpand.value = props.showExpand
    if (props.showExpand) operationBarRightPadding.value = '50px'
    else operationBarRightPadding.value = '0px'
    return
  }

  showExpand.value = false
  operationBarRightPadding.value = '0px'
}
</script>

<style scoped lang="less">
.container {
  padding: 10px;

  > .table {
    box-shadow: 0 0 1px 2px #ececec;
    border-radius: 6px;

    > .topBar {
      display: flex;
      align-items: center;
      padding: 10px;
    }

    > .operationBar {
      display: flex;
      align-items: center;
      padding: 10px 0;
      height: 30px;

      position: relative;
      padding-right: v-bind('operationBarRightPadding');

      > .label {
        font-size: 15px;
        font-weight: bold;
        color: #606266;
        user-select: none;
        padding: 0px 10px;
      }

      > .rightBtns {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    > .paginationBar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 10px;
    }
  }
}
</style>
